<template>
	<view class="content">
		<image src="@/assets/images/list_head.png" class="w-full h-[200px]"></image>
		<view class="absolute right-[45px] top-[50px] flex flex-col items-center">
			<image src="@/assets/images/home.png" class="w-[70px] h-[70px]" @click="backHome"></image>
			<text class="text-[22px] text-[#9b4612] mt-[8px]">返回首页</text>
		</view>
		<view class="custom-nav ">
			<view class="custom-nav-item" :class="[navActive('listBook')]" @click="toggleNav('listBook')">
				<image src="@/assets/images/metal-sheet.png" class="w-[69px] h-[41px] mr-[11px]" />书画
			</view>
			<view class="custom-nav-item" :class="[navActive('listSeal')]" @click="toggleNav('listSeal')">
				<image src="@/assets/images/seal.png" class="w-[55px] h-[48px] mr-[11px]" />印章
			</view>
		</view>
		<view class="list-wrap flex-1 overflow-hidden ">
			<keep-alive>
				<list-book  v-if="activeName === 'listBook'" @itemClick="itemClick('book', $event)"></list-book>
				<list-seal  v-else @itemClick="itemClick('seal', $event)"></list-seal>
			</keep-alive>
		</view>
		<view class="float-window">
			<view class="float-window-item mb-[40px]" :class="[navActive('listBook')]" @click="toggleNav('listBook')">
				<image src="@/assets/images/metal-sheet.png" class="w-[55px] h-[41px] mr-[11px]" />书画
			</view>
			<view class="float-window-item " :class="[navActive('listSeal')]" @click="toggleNav('listSeal')">
				<image src="@/assets/images/seal.png" class="w-[55px] h-[48px] mr-[11px]" />印章
			</view>
		</view>
	</view>
</template>

<script setup>
	import listBook from './list-book.vue';
	import listSeal from './list-seal.vue';
	import {
		computed,
		ref
	} from 'vue'
	const navActive = computed(() => {
		return (curName) => {
			return activeName.value === curName ? 'active' : ''
		}
	})
	const activeName = ref('listBook')

	function toggleNav(currentNav) {
		activeName.value = currentNav
	}

	function itemClick(type, info) {
		localStorage.setItem('fingerTipDetail', JSON.stringify({
			type,
			info
		}))
		uni.navigateTo({
			url: '/pages/detail/detail'
		})
	}
	function backHome() {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: url('@/assets/images/list-bg.png') no-repeat;
		background-size: 100% 100%;

		.custom-nav {
			display: flex;
			justify-content: space-between;

			&-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: calc((100vw - 00px) / 2);
				height: 100px;
				font-size: 40px;
				@apply bg-[#B49E7F];


				&.active {
					@apply bg-[#9B4612] text-white;
				}
			}
		}

		.float-window {
			position: fixed;
			right: 25px;
			bottom: 120px;
			display: flex;
			flex-direction: column;
			font-size: 30px;

			&-item {
				@apply flex flex-col w-[190px] h-[190px] items-center justify-center text-white;
				background: url('@/assets/images/flower_default.png') no-repeat;
				background-size: 100% 100%;

				&.active {
					background: url('@/assets/images/flower.png') no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
</style>